<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性 【微调：文字或者图片】
			margin使用问题1:  自适应居中,必须设置宽度建议使用div，套块元素、行块内元素、行内元素
			      使用问题2： 行元素、上下外边距失效  右左外边距
				    行元素：不可以设置高宽【高---不可以动上下】、在一行显示【宽---可以动左右】
				  
			*/
			img{
				border: 1px solid red;
				/* margin：1个属性值 顺时针： 上 右 下 左 */
				margin: 200px;
				/* margin：2个属性值 顺时针： 上下  右左 */
				margin: 10px 200px;
				/* 常用:盒子自适应居中---失效
				行内块:可以设置高宽、在一行内显示、无法居中
				 
				 */
				width: 100%;
				margin: 0 auto;
				/* margin：3个属性值 顺时针： 上  右左  下*/
				mar gin: 100px 200px 300px;
				/* margin：4个属性值 顺时针： 上  右  下  左*/
				mar gin: 100px 200px 300px 400px;
			}
			h1{/*块元素：可以设置高宽、不在一行显示、无法居中、内置文本
			    text-align：center
			 常用:盒子自适应居中---失效 */
			    width: 100%;
				border: 1px solid red;
				text-align: center;
				
				}
			span{
				/* 行元素：不可以设置高宽【高---不可以动上下】、在一行显示【宽---可以懂左右】、无法居中、内置文本
				text-align：center
			常用:盒子自适应居中---失效 */
			    width: 100%;
				border: 1px solid red;
				margin: 1000px 200px;
				}
				div{
					width: 200px;
					height: 200px;
					background: red;
					margin: auto;
				}
		</style>
	</head>
	<body>
		<!-- 框模型、盒子模型：四个部分组成:
		                     外边距:边框以外四周，叫做外边距
							 margin属性
							 边框:
							 内边距:边框以内 与内容 之间距离，叫做内边距
							 内容:块、行、行内元素本身宽高
		，所有元素存在于框模型中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞节装饰PNG免抠元素 (27)_爱给网_aigei_com.png" width="300px" height="300px" alt="圣诞" />
		<span>行内元素</span>
		<div></div>
	</body>
</html>